<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react生命周期（旧）</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react 核心库 -->
    <script
      type="text/javascript"
      src="../../react-js/react.development.js"
    ></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../../react-js/react-dom.development.js"
    ></script>
    <!-- 引入babel 用于jsx转为js -->
    <script type="text/javascript" src="../../react-js/babel.min.js"></script>

    <script type="text/babel">
      // 创建组件
      class Count extends React.Component {
        // 构造器
        constructor(props) {
          console.log('Count---constructor');
          super(props);
          // 初始化状态
          this.state = { count: 0 };
        }

        // 加1按钮的回调
        add = () => {
          // 获取原状态
          const { count } = this.state;
          //  更新状态
          this.setState({ count: count + 1 });
        };

        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById('test'));
        };

        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate();
        };

        // 组件将要挂载的钩子
        componentWillMount() {
          console.log('Count---componentWillMount');
        }

        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log('Count---componentDidMount');
        }

        // 组件将要卸载的钩子
        componentWillUnmount() {
          console.log('Count---componentWillUnmount');
        }

        // 控制组件更新的阀门
        shouldComponentUpdate() {
          console.log('Count---shouldComponentUpdate');
          return true;
        }

        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log('Count---componentWillUpdate');
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log('Count---componentDidUpdate');
        }

        // 初始化，更新状态时
        render() {
          console.log('Count---render');
          const { count } = this.state;
          return (
            <div>
              <h2>当前求和的值为{count}</h2>
              <button onClick={this.add}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不更新状态中的数据，强制更新一下
              </button>
            </div>
          );
        }
      }

      // 父组件
      class A extends React.Component {
        // 初始化状态
        state = { carName: '奔驰' };

        changeCarname = () => {
          this.setState({ carName: '奥迪' });
        };
        render() {
          return (
            <div>
              <div>我是A组件</div>
              <button onClick={this.changeCarname}>换车</button>
              <B carName={this.state.carName} />
            </div>
          );
        }
      }
      // 子组件
      class B extends React.Component {
        // 组件将要接收新的props的钩子
        componentWillReceiveProps() {
          console.log('B---componentWillReceiveProps');
        }

        //控制组件更新的阀门
        shouldComponentUpdate() {
          console.log('B---shouldComponentUpdate');
          return true;
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log('B---componentWillUpdate');
        }
        //组件更新完毕的钩子
        componentDidUpdate() {
          console.log('B---componentDidUpdate');
        }
        render() {
          console.log('B---render');
          return (
            <div>
              我是B组件，喜欢的车是
              <span style={{ color: 'orangered' }}>{this.props.carName}</span>
            </div>
          );
        }
      }
      // 渲染组件
      ReactDOM.render(<Count />, document.getElementById('test'));
    </script>
  </body>
</html>
